<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link href="/element/css/index.css" rel="stylesheet"/>
    <script src="/element/js/vue.js"></script>
    <script src="/element/js/index.js"></script>
    <script src="/element/js/axios.js"></script>
    <script src="/element/js/app.js"></script>
</head>
<body>
<div id="app">
    <template>
        <div>
            <el-row :gutter="15">
                <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
                    <el-col :span="24">
                        <el-form-item label="单行文本" prop="mobile">
                            <el-input v-model="formData.mobile" placeholder="请输入手机号" :maxlength="11" show-word-limit
                                      clearable prefix-icon='el-icon-mobile' :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="11">
                        <el-form-item label="单行文本" prop="field102">
                            <el-input v-model="formData.field102" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="13">
                        <el-form-item label="单行文本" prop="field103">
                            <el-input v-model="formData.field103" placeholder="请输入单行文本" clearable :style="{width: '100%'}">
                            </el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item label="多行文本" prop="field104">
                            <el-input v-model="formData.field104" type="textarea" placeholder="请输入多行文本"
                                      :autosize="{minRows: 4, maxRows: 4}" :style="{width: '100%'}"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="10">
                        <el-form-item label="下拉选择" prop="field105">
                            <el-select v-model="formData.field105" placeholder="请选择下拉选择" clearable :style="{width: '100%'}">
                                <el-option v-for="(item, index) in field105Options" :key="index" :label="item.label"
                                           :value="item.value" :disabled="item.disabled"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="级联选择" prop="field106">
                            <el-cascader v-model="formData.field106" :props="field106Props" :style="{width: '100%'}"
                                         placeholder="请选择级联选择" clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :span="24">
                        <el-form-item size="large">
                            <el-button type="primary" @click="submitForm">提交</el-button>
                            <el-button @click="resetForm">重置</el-button>
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
        </div>
    </template>
</div>
<script>
    var Main = {
        components: {},
        props: [],
        data() {
            return {
                formData: {
                    mobile: undefined,
                    field102: undefined,
                    field103: undefined,
                    field104: undefined,
                    field105: undefined,
                    field106: [],
                },
                rules: {
                    mobile: [{
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur'
                    }, {
                        pattern: /^1(3|4|5|7|8|9)\d{9}$/,
                        message: '手机号格式错误',
                        trigger: 'blur'
                    }],
                    field102: [{
                        required: true,
                        message: '请输入单行文本',
                        trigger: 'blur'
                    }],
                    field103: [{
                        required: true,
                        message: '请输入单行文本',
                        trigger: 'blur'
                    }],
                    field104: [{
                        required: true,
                        message: '请输入多行文本',
                        trigger: 'blur'
                    }],
                    field105: [{
                        required: true,
                        message: '请选择下拉选择',
                        trigger: 'change'
                    }],
                    field106: [{
                        required: true,
                        type: 'array',
                        message: '请至少选择一个级联选择',
                        trigger: 'change'
                    }],
                },
                field105Options: [{
                    "label": "选项一",
                    "value": 1
                }, {
                    "label": "选项二",
                    "value": 2
                }],
                field106Props: {
                    "multiple": false,
                    "label": "label",
                    "value": "value",
                    "children": "children"
                },
            }
        },
        computed: {},
        watch: {},
        created() {},
        mounted() {},
        methods: {
            submitForm() {
                this.$refs['elForm'].validate(valid => {
                    if (!valid) return
                    // TODO 提交表单
                })
            },
            resetForm() {
                this.$refs['elForm'].resetFields()
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

</script>
<style>
</style>

</body>
</html>